<template>
  <div class="check">
    <el-row type="flex" align="middle" class="c_type">
      <el-col>
        <p>选择客户类型</p>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="9" class="c_check_img">
        <img src="../../assets/img/main/personal.png">
        <el-row type="flex" align="middle" justify="center">
          <label for="personal">
            <input v-model="cust_type" value="01" type="radio" id="personal">
            <span>个人客户</span>
          </label>
        </el-row>
      </el-col>
      <el-col :span="9" :offset="2" class="c_check_img">
        <img src="../../assets/img/main/company.png">
        <el-row type="flex" align="middle" justify="center">
          <label for="company">
            <input v-model="cust_type" value="02" type="radio" id="company">
            <span>企业客户</span>
          </label>
        </el-row>
      </el-col>
    </el-row>
    <el-form :model="dataForm" :rules="rules" ref="dataForm">
      <el-row type="flex" align="middle" class="c_no">
        <el-col :span="10">
          <el-form-item prop="custno">
            <el-input v-model="dataForm.custno" :placeholder="placeholderMsg" class="ui_input"/>
          </el-form-item>
        </el-col>
        <el-col :span="4" :offset="1">
          <el-form-item>
            <el-button @click.prevent="queryCustInfo" class="ui_button">确认</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import { mapActions } from 'vuex'
export default {
  data () {
    return {
      cust_type: '01',
      placeholderMsg: '请输入身份证号码',
      dataForm: {
        custno: ''
      },
      rules: {
        custno: [{
          required: true,
          type: 'string',
          trigger: 'blur',
          message: '请输入证件号码'
        }]
      }
    }
  },
  watch: {
    cust_type () {
      if (this.cust_type === '01') {
        this.placeholderMsg = '请输入身份证号码'
      } else {
        this.placeholderMsg = '请输入统一社会信用代码'
      }
    }
  },
  methods: {
    ...mapActions('applystore', ['updateCustType']),
    queryCustInfo () {
      this.$refs['dataForm'].validate((validate) => {
        if (validate) {
          // 存储客户类型
          this.updateCustType(this.cust_type)
          // 跳转下一步
          if (this.cust_type === '01') {
            this.$router.push({ name: 'personal', params: { custno: this.dataForm.custno } })
          } else {
            this.$router.push({ path: '/apply/check/company' })
          }
        }
      })
    }
  }
}
</script>
<style lang="scss">
.check {
  .c_type {
    font-size: 20px;
    padding: 25px 0 20px 0;
  }
  .c_check_img img {
    width: 100%;
  }
  .c_check_img .el-row {
    margin: 20px auto;
    font-size: 20px;
    label {
      cursor: pointer;
    }
    input {
      display: inline-block;
      width: 20px;
      height: 20px;
      position: relative;
      overflow: visible;
      border: 0;
      background: none;
      -webkit-appearance: none;
      outline: none;
      margin-right: 15px;
      vertical-align: middle;
    }
    input:before {
      content: "";
      display: block;
      width: 20px;
      height: 20px;
      border: 1px solid #dfe0e1;
      border-radius: 13px;
      background-clip: padding-box;
      position: absolute;
      left: 0px;
      top: -3px;
    }
    input:checked:after {
      content: "";
      display: block;
      width: 20px;
      height: 20px;
      background-image: url(../../assets/img/main/radio_checked.png);
      background-repeat: no-repeat;
      background-size: 20px;
      border-radius: 13px;
      position: absolute;
      left: 1px;
      top: -2px;
    }
  }
  .c_no {
    padding-top: 30px;
    .ui_button {
      width: 180px;
      color: #ffffff !important;
      background: #ef5d5d !important;
    }
  }
}
</style>
